.row-type(@ie:9;@Prefix:~'-';@Suffix:~'';){
  .cl@{Prefix}row@{Suffix}{
    .clear();
    [class^='col']{float:left;}
  }
  .ib@{Prefix}row@{Suffix}{
    font-size:0;
    [class^='col']{
      .dis-ib(@ie);
    }
  }
  & when (@ie >= 10){
    .flex@{Prefix}row@{Suffix}{
      .dis-flex();
      -webkit-box-lines:multiple;
      .c3p(flex-wrap,wrap);
      [class^='col']{
        .c3p(flex,~'0 0 auto');
        // flex-grow:0;
        // flex-shrink:1;
        // flex-basis:auto;
      }
    }
  }
}


.col(@Col:6;@Prefix:~'-';@Suffix:~'';){
  each(range(@Col+1), {
    //range起始值从1开始……无法满足偏移复位问题，故range数字+1处理，value-1处理
    @v : @value - 1;//用@value-1处理缺0的部分；注意@v和@value的区别
    .col@{Prefix}@{v}R@{Col}@{Suffix}{
      width:percentage(@v / @Col);
    }
    .offest@{Prefix}@{v}R@{Col}@{Suffix}{
      margin-left:percentage( @v / @Col );
    }
    .push@{Prefix}@{v}R@{Col}@{Suffix}{
      left:percentage( @v / @Col );
    }
    .pull@{Prefix}@{v}R@{Col}@{Suffix}{
      right:percentage( @v / @Col );
    }
  });
}

.groove(@ie:10;@Gshow:20;@Gcale:20px;@Prefix:~'-';@Suffix:~'';){
  each(range(3),{
    @v:@value - 1;
    .row@{Prefix}G@{Gshow}-a@{v}@{Suffix}{
      margin:@Gcale * (@value - 2) * 0.5 @Gcale * (@value - 2) * 0.5 @Gcale * (@value - 2) * 0.5 @Gcale * (@value - 2) * 0.5;
      & when (@value = 0){overflow:hidden;}
    }
    .row@{Prefix}G@{Gshow}-lr@{v}@{Suffix}{
      margin:@Gcale * (@value - 2) * 0.5 0 @Gcale * (@value - 2) * 0.5 0;
      & when (@value = 0){overflow:hidden;}
    }
    .row@{Prefix}G@{Gshow}-tb@{v}@{Suffix}{
      margin:0 @Gcale * (@value - 2) * 0.5 0 @Gcale * (@value - 2) * 0.5;
    }
  })
  & when(@ie >= 9){
    .col@{Prefix}G@{Gshow}-a@{Suffix}{
      padding:@Gcale * 0.5 @Gcale * 0.5 @Gcale * 0.5 @Gcale * 0.5;
    }
    .col@{Prefix}G@{Gshow}-lr@{Suffix}{
      padding:0 @Gcale * 0.5 0 @Gcale * 0.5;
    }
    .col@{Prefix}G@{Gshow}-tb@{Suffix}{
      padding:@Gcale * 0.5 0 @Gcale * 0.5 0;
    }
  }
  & when(@ie < 9){
    .col@{Prefix}G@{Gshow}-a@{Suffix}{
      &>.mbp{
        margin:@Gcale * 0.5 @Gcale * 0.5 @Gcale * 0.5 @Gcale * 0.5;
      }
    }
    .col@{Prefix}G@{Gshow}-lr@{Suffix}{
      &>.mbp{
        margin:0 @Gcale * 0.5 0 @Gcale * 0.5;
      }
    }
    .col@{Prefix}G@{Gshow}-tb@{Suffix}{
      &>.mbp{
        margin:@Gcale * 0.5 0 @Gcale * 0.5 0;
      }
    }
  }
}


.gridLayoutSys(
  @ie:10;@Col:12;@Gshow:20;@Gcale:20px;
  @Prefix:~'-';@Suffix:~''
  ){
    // .row-type(@ie,@Prefix,@Suffix);
    .col(@Col,@Prefix,@Suffix);
    .groove(@ie,@Gshow,@Gcale,@Prefix,@Suffix);
}
// 封装实用的栅格系统，一般在项目中配合媒体查询使用，一般在col部分会有浪费的

.test(gridSys){
  .gridLayoutSys(@ie:10;@Col:12;@Gshow:20;@Gcale:20px;@Prefix:~'-p-';@Suffix:~'-s-test');
}

// 当前模块有引用其他模块的部分，所以自我测试会报错
// 将原loop改写为each时测试报错，后检测为引用其他模块部分报错,[3,9,14,16,18]
// 但是全局模块可以调用，所以可以在全局模块中测试test
// .test(gridSys);